<template>
  <div>
    <el-card>
      <template #header>
        <div class="card-header">微信绑定、登录验证方式选择</div>
      </template>
      <div class="tipps">
        1：扫码绑定微信号，绑定微信号后可修改登录验方式。2：验证码登录，根据手机号发送验证码，填写验证码验证登录。3：扫码验证登录，微信扫描二维码，验证成功登录。
      </div>
      <div style="margin: 10px 0;">
        <img src="@/assets/logo/qrcode.png" alt="" />
      </div>
      <div class="tipps">2:登录验证方式选择:</div>
      <el-form :model="form" ref="ruleFormRef">
        <el-form-item prop="type" label="登录验证方式">
          <el-radio-group v-model="form.type">
            <el-radio :value="1">短信验证码验证</el-radio>
            <el-radio :value="2">微信扫码验证</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  v-hasPermi="['system:user:updLoginWay']">确定</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import {FormInstance } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const form = reactive({
    type: 1,
})
</script>

<style scoped>
.card-header {
    font-size: 16px;
    font-weight: 700;
    padding: 10px 0
}
.tipps {
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
    padding: 15px;
    font-size: 14px;
    border-radius: 5px;
}
</style>
